<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>付费数据</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
</head>
<body>
<div class="layuimini-container" id="app">
    <div class="layuimini-main">
        <!-- 查询筛选表单 -->
        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="" lay-filter="table-search">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">渠道类型</label>
                            <div class="layui-input-inline">
                                <div id="serverGroup"></div>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">选择区服:</label>
                            <div class="layui-input-inline">
                                <select name="gameArea" class="layui-select" >
                                    <option value="">全部</option>
                                    <option v-for="(item,index) in services" :value="item.server_id">{{item.name}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">支付渠道:</label>
                            <div class="layui-input-inline">
                                <select name="channel" class="layui-select">
                                    <option value="">全部</option>
                                    <option v-for="(item,index) in payChannel" :value="item.id">{{item.name}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">代理渠道:</label>
                            <div class="layui-input-inline">
                                <select name="gamechannel" class="layui-select" lay-filter="gamechannel">
                                    <option value="">全部</option>
                                    <option v-for="(item,index) in channels" :value="item.id">{{item.name}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">包号列表</label>
                            <div class="layui-input-inline">
                                <div id="serverPackage"></div>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">记录时间</label>
                            <div class="layui-input-inline">
                                <input type="text" name="createDateTimeBegin" id="createTime0"
                                       placeholder="开始时间" autocomplete="off" class="layui-input" />
                                <input type="text" name="createDateTimeEnd" id="createTime1"
                                       placeholder="截止时间" autocomplete="off" class="layui-input" />
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>
        <div style="margin-top:24px;">
            <tr>
                <th >  活跃玩家充值金额：{{ totalActiveUserFee }}</th>
                <th >  首次付费玩家充值金额：{{ totalFirstPayFee }}</th>
                <th >  首日付费玩家充值金额：{{ totalFirstPayPlayersFee }}</th>

            </tr>
        </div>
        <!-- 付费转化表格 -->
        <div style="margin-top:24px;">
          <table class="layui-table">
            <thead>
              <tr>
                <th rowspan="2">日期</th>
                <th colspan="3">活跃玩家</th>
                <th colspan="3">首次付费玩家</th>
                <th colspan="3">首日付费玩家</th>
              </tr>
              <tr>
                <th>付费金额</th>
                <th>付费人数</th>
                  <th>付费次数</th>
                  <th>付费金额</th>
                  <th>付费人数</th>
                  <th>付费次数</th>
                  <th>付费金额</th>
                  <th>付费人数</th>
                  <th>付费次数</th>
            </thead>
            <tbody>
              <tr v-for="row in tableData" :key="row.date">
                <td>{{ row.date }}</td>
                <td>{{ row.hotUserTotalFee }}</td>
                <td>{{ row.hotUserDistinctCount }}</td>
                <td>{{ row.hotUserPayCount }}</td>
                <td>{{ row.firstPayTotalFee }}</td>
                <td>{{ row.firstPayDistinctCount }}</td>
                <td>{{ row.firstPayCount }}</td>
                  <td>{{ row.firstPayPlayersTotalFee }}</td>
                  <td>{{ row.firstPayPlayersDistinctCount }}
                  <td>{{ row.firstPayPlayersCount }}</td>

              </tr>
              <tr v-if="tableData.length === 0">
                <td colspan="7" style="text-align:center;">暂无数据</td>
              </tr>
            </tbody>
          </table>
          <div id="pagination"></div>
        </div>
    </div>
</div>
<script src="/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>

<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/js/common.js?v=5" charset="utf-8"></script>
<script src="/js/vue.min.js"></script>
<script src="/xm-select-v1.2.4/xm-select.js"></script>
<script>
    var form, $, _this;
    var services = JSON.parse(localStorage.getItem('services'));
    var channels = getEnum('channel');
    var payChannel = getEnum('payChannel');
    new Vue({
      el: "#app",
      data: {
        services: services,
        channels: channels,
        payChannel: payChannel,
        tableData: [],
        total: 0,
          totalActiveUserFee: 0,
          totalFirstPayFee: 0,
          totalFirstPayPlayersFee: 0,
          page: 1,
        limit: 10,
        lastQuery: {}
      },

      methods: {
        fetchData(params, page = 1) {
          var _this = this;
          var query = Object.assign({}, params || {}, { page: page, limit: this.limit });
          $.get('/admin/payOrderData/paginate', query, function(res) {
            if (res.code === 0) {
              _this.tableData = (res.data.data && res.data.data) ? res.data.data : [];
              _this.total = (res.data && res.data.total) ? res.data.total : 0;
                _this.totalActiveUserFee = (res.data && res.data.totalActiveUserFee) ? res.data.totalActiveUserFee : 0;
                _this.totalFirstPayFee = (res.data && res.data.totalFirstPayFee) ? res.data.totalFirstPayFee : 0;
                _this.totalFirstPayPlayersFee = (res.data && res.data.totalFirstPayPlayersFee) ? res.data.totalFirstPayPlayersFee : 0;
                _this.renderPage(query);
            } else {
              layer.msg(res.msg || '查询失败', {icon: 2});
            }
          });
        },
        renderPage(query) {
          var _this = this;
          layui.use('laypage', function() {
            layui.laypage.render({
              elem: 'pagination',
              count: _this.total,
              limit: _this.limit,
              curr: _this.page,
              layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
              jump: function(obj, first) {
                if (!first) {
                  _this.page = obj.curr;
                  _this.limit = obj.limit;
                  _this.fetchData(query, obj.curr);
                }
              }
            });
          });
        }
      },
      mounted() {
        var _this = this;
        layui.use(['form', 'laydate'], function () {
          form = layui.form;
          $ = layui.jquery;
          var laydate = layui.laydate;
          laydate.render({
            elem: '#createTime0',
            type: 'datetime',
            value: getYmd(0) + " 00:00:00"
          });
          laydate.render({
            elem: '#createTime1',
            type: 'datetime',
            value: getYmd(1) + " 00:00:00"
          });
          // 包号多选
          $.get("/admin/gamePackage/paginate", {page:1,limit:9999}, function(res){
            var datapackeages = [];
            for (var k in res.data) {
              var v = res.data[k];
              datapackeages.push({
                name: v.package_no,
                value: v.package_no,
              });
            }
            xmSelect.render({
              el: '#serverPackage',
              name: "serverPackage",
              language: 'zn',
              data: datapackeages,
              multiple: true,
            });
          });
          form.render();
          // 监听表单提交
          form.on('submit(data-search-btn)', function (data) {
            _this.page = 1;
            _this.lastQuery = data.field;
            _this.fetchData(data.field, 1);
            return false;
          });
          // 页面初次加载
          _this.fetchData({}, 1);
        });
      }
    });
</script>
</body>
</html>
